<template>
	<view class="placement">
		<view class="content" v-if="!placementList.length">
			<img style="width: 100%;" src="/static/images/noSearch.png" alt="">
		</view>
		<view v-else>
			<view class="content" v-for="(item,index) in placementList"
				@click="open(item.uid)">
				<view class="top">
					<view class="nick">
						昵称：{{ item.nickname }}
					</view>
					<view class="status">
						未安置
					</view>
				</view>
				<view class="bottom">
					账号：{{item.account}}
				</view>
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="false">
			<view class="popupTk">
				<view class="title">
					选择安置市场
				</view>
				<view class="line">
					<view class="select">
						<button v-for="(item,index) in buttons"
							:style="{ backgroundColor: activeDiv === index ? '#dfdfdf' : 'transparent'}"
							@click="getUserByJd(1,index)">{{ item.name }}</button>
					</view>
					<!-- <view class="search">
						 <view class="searchIcon">
							<text class="iconfont icon-xiazai5" @click="userSearch(phone)"></text>
						</view> 
						<input v-model="phone" placeholder="账号" />
					</view> -->
					<scroll-view class="scroll-view" scroll-y="true">
						<view class="contentInfo">
							<radio-group v-model="selectedValue" @change="onChange" >
								<view class="contentInfoDiv" v-for="(item,index) in nameList" :key="index">
									<label class="radio">
										<radio :value="item.uid" />
									</label>
									<view style="display: flex;justify-content: space-between;flex:1">
										<view class="contentInfoName">
											{{ item.nickname }}
										</view>
										<view class="contentInfoNamePhone">
											{{ item.phone }}
										</view>
									</view>
								</view>
							</radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="btn">
					<view @click="close">关闭</view>
					<view @click="submitPlacement">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getPlacementUser,
		getPlacementUserByLine,
		setPlacementUser,
		setAutoAnzUser
	} from "@/api/user.js"
	import store from "@/store/index.js"
	export default {
		data() {
			return {
				aid: 0,
				pid: 0,
				selectedValue: '', // 用于绑定选中的值
				activeDiv: 0,
				buttons: [{
						id: 1,
						name: "A 市场"
					},
					{
						id: 2,
						name: "B 市场"
					}
				],
				phone: '',
				userInfo: store.state.app.userInfo,
				placementList: [],
				nameList: [],
				searchList: [],
			}
		},
		onLoad() {
			this.selectPlacement()
		},
		methods: {
			onChange(event) {
				// 当选中已有的选项时，将其设置为空字符串取消选中
				if (this.selectedValue === event.target.value) {
					this.selectedValue = '';
				}
				this.pid = event.target.value
				console.log(event)
			},
			open(id) {
				this.aid = id
				this.$refs.popup.open('center')
				this.getUserByJd(1, 0)
			},
			close() {
				this.$refs.popup.close()
			},
			// 查询未安置人数
			async selectPlacement() {
				uni.showLoading({
					title: '正在加载'
				})
				let that = this
				await getPlacementUser().then((res) => {
					that.placementList = res.data
					console.log("allPerson", that.placementList)
					uni.hideLoading()
				}).catch((res) => {
					that.$util.Tips({
						title: res
					});
					uni.hideLoading()
				})
			},
			// 查询安置节点用户
			async getUserByJd(line, index) {
				if (this.phone) {
					this.phone = ''
				}
				this.activeDiv = index
				if (index == 0) {
					line = 1
				} else {
					line = 2
				}
				uni.showLoading({
					title: '正在加载'
				})
				let that = this
				await getPlacementUserByLine(line).then(res => {
					console.log("sss", res)
					that.nameList = res.data
					that.searchList = res.data
					uni.hideLoading()
				}).catch((res) => {
					that.$util.Tips({
						title: res
					});
					uni.hideLoading()
				})
			},

			submitPlacement() {
				console.log()
				console.log(this.aid, this.pid);
				if (0 == this.aid || this.aid == "") {
					return this.$util.Tips({
						title: "请选择需要被安置的账号"
					})
				}
				
				// setPlacementUser(this.aid, this.pid).then((res) => {
				// 	uni.showToast({
				// 		title: "安置成功",
				// 		icon: "success"
				// 	})
				// 	setTimeout(() => {
				// 		this.$refs.popup.close()
				// 		// 更新为安置人数
				// 		this.selectPlacement()
				// 	}, 2000)
				// }).catch((res) => {
				// 	this.$util.Tips({
				// 		title: res
				// 	});
				// })
				
				setAutoAnzUser({aid:this.aid,line:this.activeDiv+1}).then((res) => {
					uni.showToast({
						title: "安置成功",
						icon: "success"
					})
					setTimeout(() => {
						this.$refs.popup.close()
						// 更新为安置人数
						this.selectPlacement()
					}, 2000)
				}).catch((res) => {
					this.$util.Tips({
						title: res
					});
				})
			},
			userSearch(phone) {
				const arr = this.searchList.filter(item => item.phone === phone)
				if (arr.length <= 0) {
					this.$util.Tips({
						title: "没有获取到该用户信息"
					})
				}
				this.nameList = []
				this.nameList = arr

				console.log(phone, this.nameList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
	}

	.placement {
		width: 100%;
		height: 100%;
		padding: 23rpx;

		.content {
			background-color: white;
			padding: 23rpx;
			margin-bottom: 23rpx;
			border-radius: 12rpx;


			.top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 23rpx;

				.status {
					font-weight: bold;
					color: orange;
				}
			}
		}

		.popupTk {
			position: relative;
			background-color: white;
			border-radius: 20rpx;

			.title {
				text-align: center;
				padding: 20rpx;
			}

			.line {
				padding: 0 20rpx 150rpx 20rpx;
				height: 100%;

				.select {
					display: flex;
					justify-content: space-around;

					button {
						width: 50%;
						padding: 10rpx;
					}
				}

				.search {
					display: flex;
					margin: 25rpx 0;

					.searchIcon {
						height: 80rpx;
						line-height: 80rpx;
						width: 10%;
						text-align: center;
					}

					input {
						width: 90%;
						height: 80rpx;
						line-height: 50rpx;
						font-size: 22rpx;
						padding-left: 15rpx;
						border-bottom: #b9b9b9 solid 1rpx;
					}
				}

				.scroll-view {
					height: 400rpx;

					.contentInfo {
						width: 550rpx;

						.contentInfoDiv {
							margin: 10rpx 0;
							height: 80rpx;
							line-height: 80rpx;
							padding: 0 20rpx;
							background-color: #fafafa;
							display: flex;

							.contentInfoName {
								margin: 0 40rpx 0 10rpx;
							}
						}
					}
				}
			}

			.btn {
				position: absolute;
				width: 100%;
				bottom: 0;
				height: 100rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				line-height: 100rpx;
				border-top: #fafafa solid 1rpx;
				color: blue;
				font-weight: bold;
			}
		}
	}
</style>